<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>字体图标</title>
	<link rel="stylesheet" href="css/common.css">
	<link rel="stylesheet" href="css/font.css">
	<style>
		.icon {
			width: 815px;
			height: 33px;
		line-height: 33px;
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		background-color: #f1f1f1;
		padding-left: 18px;
		}

.icon li { 
	float: left; 
	margin-right: 20px;
}

i { 
	color: #999; 
}

@font-face {
	font-family: "imooc-icon";
	src: url("fonts/icomoon.eot"); /* IE9 兼容模式 */
	src: url("fonts/icomoon.eot?#iefix") format("embedded-opentype")
		,url("fonts/icomoon.woff") format("woff")
		,url("fonts/icomoon.ttf") format("truetype")
		,url("fonts/icomoon.svg") format("svg");
	font-weight: normal;
	font-style: normal;
}

.imooc-icon {
	font-family: "imooc-icon";
	font-style: normal;
	font-weight: normal;
	font-size: 18px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
	</style>
</head>
<body>
<ul class="icon">
	<li><a href=""><i class="imooc-icon">&#xea61;</i></a></li>
	<li><a href=""><i class="imooc-icon">&#xea62;</i></a></li>
	<li><a href=""><i class="imooc-icon">&#xea63;</i></a></li>
	<li><a href=""><i class="imooc-icon">&#xea64;</i></a></li>
	<li><a href=""><i class="imooc-icon">&#xea65;</i></a></li>
	<li><a href=""><i class="imooc-icon">&#xe906;</i></a></li>
	<li><a href=""><i class="imooc-icon">&#xe907;</i></a></li>
	<li><a href=""><i class="imooc-icon">&#xe9cb;</i></a></li>
	<li><a href=""><i class="imooc-icon">&#xe9bb;</i></a></li>
	<li><a href=""><i class="imooc-icon">&#xea77;</i></a></li>
	<li><a href=""><i class="imooc-icon">&#xe977;</i></a></li>
	<li><a href=""><i class="imooc-icon">&#xe9df;</i></a></li>
	<li><a href=""><i class="imooc-icon">&#xe90d;</i></a></li>
	<li><a href=""><i class="imooc-icon">&#xea71;</i></a></li>
	<li><a href=""><i class="imooc-icon">&#xe912;</i></a></li>
	<li><a href=""><i class="imooc-icon">&#xea80;</i></a></li>
	<li><a href=""><i class="imooc-icon">&#xe965;</i></a></li>
	<li><a href=""><i class="imooc-icon">&#xe966;</i></a></li>
</ul>
</body>
</html>